<template>
  <div class="container">
    <el-card shadow="never">
      <h2 style="margin:0 0 12px;">分类</h2>
      <el-skeleton v-if="loading" :rows="5" animated />
      <el-empty v-else-if="list.length===0" description="暂无分类" />
      <el-row v-else :gutter="12">
        <el-col v-for="c in list" :key="c.name" :xs="12" :md="8" :lg="6">
          <el-card shadow="hover" style="margin-bottom:12px;">
            <div style="display:flex;align-items:center;justify-content:space-between;">
              <strong>{{ c.name }}</strong>
              <el-tag type="info">{{ c.count }}</el-tag>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { fetchCategories } from '@/services/blogService'

const list = ref([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  list.value = await fetchCategories()
  loading.value = false
})
</script>


